	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
    	.like-ani{
    		-webkit-animation-name:likeani;
    		        animation-name:likeani;
    		-webkit-animation-duration: .8s;
    		        animation-duration: .8s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	
    	.miniicon{
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		transform: translate(-50%,-50%) scale(1);
    		display: block;
    		color: red;
    		z-index: -555;
    		opacity: 0;
    		
    	}
    	.icon-ani1{
    		-webkit-animation-name:iconani1;
    		        animation-name:iconani1;
    		-webkit-animation-duration: 1s;
    		        animation-duration: 1s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.icon-ani2{
    		-webkit-animation-name:iconani2;
    		        animation-name:iconani2;
    		-webkit-animation-duration: 1s;
    		        animation-duration: 1s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	.icon-ani3{
    		-webkit-animation-name:iconani3;
    		        animation-name:iconani3;
    		-webkit-animation-duration: 1s;
    		        animation-duration: 1s;
    		-webkit-animation-timing-function:ease-in-out;
    		        animation-timing-function:ease-in-out;
    	}
    	@-webkit-keyframes likeani{
    		0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
    		60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
    		90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    		100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}
    		
    	}
    	@keyframes likeani{
    		0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
    		60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
    		90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
    		100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}
    		
    	}
    	
    	@-webkit-keyframes iconani1{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
    		100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
    	}
    	@keyframes iconani1{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
    		100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
    	}
    	@-webkit-keyframes iconani2{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
    	}
    	@keyframes iconani2{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
    	}
    	@-webkit-keyframes iconani3{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
    	}
    	@keyframes iconani3{
    		0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
    		50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
    		100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
    	}
    </style>


	<!-- ugc / 无限点赞 start-->

	<div class="like " style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
		<!-- 嵌入layui的字体图标 -->
		<!-- 组件文档 "https://www.layui.com/doc/element/icon.html" -->
    	<i class="likeicon layui-icon layui-icon-heart" data-iconfill='layui-icon-heart-fill' data-anilike='like-ani' style="font-size: 100px;color: red;cursor: pointer;display: block;"></i> 
    	<i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani1'></i> 
    	<i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani2'></i> 
    	<i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani3'></i> 
	</div>

	<script type="text/javascript">
		//取得小红心的jq对象
		var miniicon=$('.miniicon');
		$('.likeicon').on('click',function(){
			var likethis=$(this),
			iconfill=likethis.data('iconfill'),
			anilike=likethis.data('anilike');
            //去掉空心红心的字体图标
            likethis.removeClass('layui-icon-heart');
            //默认点击后取消动画
            miniicon.each(function(){
                    $(this).removeClass($(this).data('ani'));
                });
            likethis.removeClass(anilike);
			//利用事件循环机制，保证每次点击都会有一次动画类名的添加。
            setTimeout(function(){
                    miniicon.each(function(){
                        $(this).addClass($(this).data('ani'));
                    });
                    likethis.addClass(anilike).addClass(iconfill);
                });
            
		});
		
	</script>
	<!-- ugc / 无限点赞 start-->
	
	
